<template>
  <transition  appear name="side_anime">
    <div id="board5">
      <h1>咨询管理</h1>

      <!-- 查询 -->
      <!-- <div class="search">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

          <el-form-item>
            <el-date-picker
              v-model="searchForm.date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchNews">查询</el-button>
          </el-form-item>
        </el-form>
      </div> -->

      <el-divider></el-divider>

      <div class="btn">
        <el-button icon="el-icon-plus" type="success" size="small" @click="addNewsFormVisible = true">新增咨询</el-button>
        <!-- <el-button icon="el-icon-delete" type="danger" size="small" @click="batchDelete()">批量删除</el-button> -->
      </div>


      <!-- 资讯列表 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
          
          <!-- <el-table-column
            type="selection"
            width="55">
          </el-table-column> -->

          <el-table-column
            prop="title"
            label="标题"
            width="120">
          </el-table-column>

          <el-table-column
            label="日期"
            width="180">
            <template #default="scope">{{ scope.row.time }}</template>
          </el-table-column>
          
          <el-table-column
            prop="message"
            label="咨询内容"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column
              prop="type"
              label="资讯种类"
              width="120">
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

      </el-table>

      <!-- 新增资讯 -->
      <el-dialog title="新增资讯" v-model="addNewsFormVisible" width="50%">
        <el-form ref="form" :model="addNewsForm" label-width="80px">
          <el-form-item label="标题">
            <el-input placeholder="请输入标题" v-model="addNewsForm.title" clearable></el-input>
          </el-form-item>
          <el-form-item prop="description" label="内容">
            <el-input type="textarea" placeholder="请输入资讯内容" v-model="addNewsForm.message" clearable></el-input>
          </el-form-item>
          <el-form-item label="资讯种类">
            <el-select v-model="info_type" class="selector">
              <el-option label="新闻" value="0"></el-option>
              <el-option label="资讯" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span class="dialog-footer">
          <el-button @click="addNewsFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNews">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑资讯 -->
      <el-dialog title="编辑资讯" v-model="updateNewsFormVisible" width="50%">
        <el-form ref="form" :model="selectInfo" label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input placeholder="请输入标题" v-model="selectInfo.title" clearable></el-input>
          </el-form-item>
          <el-form-item prop="description" label="内容">
            <el-input type="textarea" placeholder="请输入资讯内容" v-model="selectInfo.message" clearable></el-input>
          </el-form-item>
          <el-form-item label="资讯种类">
            <el-select v-model="selectInfo.type" class="selector">
              <el-option label="新闻" value="0"></el-option>
              <el-option label="资讯" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="updateNews">确 定</el-button>
        </span>
      </el-dialog>

      <!-- <div style="margin-top: 20px" class="select">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->

      <!-- 分页 -->
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          v-model:currentPage="currentPage"
          v-model:pageSize="pageSize"
          :page-size="8"
          layout="total, prev, pager, next"
          :total=total>
      </el-pagination>
      
    </div>
  </transition>
</template>

<script>
import {search} from '../../api/api'
import {add} from '../../api/api'
import {update} from '../../api/api'
import {deleted} from '../../api/api'
import { defineComponent, inject, ref } from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";


  export default defineComponent({
    inject:['reload'],
    data() {
      return {
        info_type:'新闻',
        selectInfo:{},
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: 'Today',
          value: new Date(),
        }, {
          text: 'Yesterday',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          },
        }, {
          text: 'A week ago',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          },
        }],
        value1: '',
        value2: '',
        tableData: [],
        multipleSelection: [],
        currentPage:1,
        total:0,
        pageSize:8,
        addNewsForm:{
          title: '',
          message: '',
          type: 0
        },
        addNewsFormVisible:false,
        updateNewsForm:{
          title: '',
          message: '',
          time:'',
          type: 0
        },
        updateNewsFormVisible:false
      }
    },

    setup() {
      return {
        textarea: ref(''),
      }
    },

    mounted() {
      this.getNewsList();
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(selection) {
        this.multipleSelection = selection;
      },

      //当每页数据条数发生改变的时候触发
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.currentPage = 1;
        this.pageSize = val;
        this.getNewsList();
      },
      //当页码发生改变的时候触发
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val;
        this.getNewsList(val);
      },

      //获取资讯列表
      getNewsList(page) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let data = {
          'page':this.currentPage,
          'size':8
        }
        let header = {
          'satoken':token
        }
        search(data,header).then(response => {
          console.log('请求成功',response)
          if (response.ret === 0){
            this.tableData = response.list
            this.tableData.forEach(value => {
              if (value.type===0){
                value.type = '新闻'
              }else{
                value.type = '资讯'
              }
            })
            this.total = response.total
          }else {
            this.$message({
              message:'获取数据失败',
              type: 'error',
              showClose:true
          })
          }
        })
      },

      //新增资讯
      addNews() {
        if (this.info_type === '新闻'){
          this.addNewsForm.type = 0
        }
        else{
          this.addNewsForm.type = 1
        }
        let token = this.$store.state.medicalStaff.loginData.tokenValue

        let header = {
          'satoken':token
        }
        add({
          ...this.addNewsForm
        },header).then(response => {
          console.log('请求成功',response)
          if (response.ret === 0){
            // this.$router.push('/homeview/newsList')
            this.total++
            this.addNewsFormVisible = false
            this.reload()
            this.$message({
              message:'添加成功',
              type: 'success',
              showClose:true
            })
          }else {
            this.$message({
              message:'添加失败',
              type: 'error',
              showClose:true
            })
          }
        })
      },

      cancelEdit(){
        ElMessageBox.confirm(
            '取消修改后，不会保存任何修改！确认取消修改？',
            '警告',
            {
              confirmButtonText: '确认',
              cancelButtonText: '我再想想',
              type: 'warning'
            }
        )
          .then(()=>{
            ElMessage.info({
              type: 'info',
              message: '修改取消'
            })
            this.updateNewsFormVisible = !this.updateNewsFormVisible
          })
          .catch(()=>{
            ElMessage.warning({
              type: 'warning',
              message: '继续修改'
            })
          })
      },
      //修改资讯
      handleEdit(index,row) {
        this.updateNewsFormVisible = true
        this.selectInfo = JSON.parse(JSON.stringify(row))
      },
      updateNews() {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        this.updateNewsForm = JSON.parse(JSON.stringify(this.selectInfo))

        if (this.updateNewsForm.type === '资讯' || this.updateNewsForm.type === "1"){
          this.updateNewsForm.type = 1
        }
        else{
          this.updateNewsForm.type = 0
        }

        console.log(this.updateNewsForm)

        this.updateNewsForm.time = this.$moment(this.updateNewsForm.time)
        let header = {
          'satoken':token
        }

        update({
          ...this.updateNewsForm
        },header).then(response => {
          console.log('请求成功',response)
          if (response.ret === 0){
            // this.$router.push('/homeview/newsList')
            this.updateNewsFormVisible=false
            this.reload()
            this.$message({
              message:'资讯修改成功',
              type: 'success',
              showClose:true
            })
          }else {
            this.$message({
              message:'资讯修改失败',
              type: 'error',
              showClose:true
            })
          }
        })
      },

      //删除资讯
      handleDelete(index,row) {
        let data = {
          'id':row.id
        }
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let header = {
          'satoken':token
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          deleted(data,header).then(response => {
            if (response.ret === 0){
              this.tableData.splice(index,1)
              this.total--
              this.reload()
              // this.$router.push('/homeview/newsList')
              this.$message({
                message:'删除资讯成功',
                type: 'success',
                showClose:true
              })
            }else {
              this.$message({
                message:'删除资讯失败',
                type: 'error',
                showClose:true
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
        
      }

    }
  })

</script>

<style>
</style>

<style scoped>
.selector{
  width: 100%;
}
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
#board5 .btn {
  text-align: left;
  margin: 10px 0 5px 0;
}
#board5 .search {
  text-align: left;
}
#board5 .pagination {
  margin-top: 30px;
}
</style>
